<template>
  <el-drawer
    :title="drawerTitle[drawerType]"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="beforeClose"
    @closed="clearDialog"
    custom-class="tag-drawer packet-edit-drawer"
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="140px" :rules="editFormRules" ref="editForm">
          <el-form-item label="标签包名称：" prop="packetNm">
            <el-col :span="12">
              <el-input placeholder="请输入标签包名称" v-model="editForm.packetNm"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="标签包编码：" prop="packetCode">
            <el-col :span="12">
              <el-input placeholder="请输入标签包编码" v-model="editForm.packetCode"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="标签包描述：" prop="packetDesc">
            <el-col :span="18">
              <el-input
                type="textarea"
                :rows="5"
                placeholder="请在此输入你的描述，总长度不超过1000个字符"
                resize="none"
                :maxlength="1000"
                :show-word-limit="true"
                v-model="editForm.packetDesc"
              >
              </el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="beforeClose()">取消</el-button>
      <el-button type="primary" size="medium" @click="submit">保存</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerType: 'add',
      drawerTitle: {
        add: '新增标签包',
        edit: '编辑标签包'
      },
      drawerVisible: false,
      editForm: {
        packetId: '',
        packetNm: '',
        packetCode: '',
        packetDesc: ''
      },
      editFormRules: {
        packetNm: [
          { required: true, message: '标签包名称不能为空', trigger: 'blur' },
          { max: 32, message: '标签包名称不能超过32个字符', trigger: 'blur' }
        ],
        packetCode: [
          { required: true, message: '标签包编码不能为空', trigger: 'blur' },
          { max: 16, message: '标签包编码不能超过16个字符', trigger: 'blur' }
        ],
        packetDesc: [{ max: 1000, message: '标签包描述不能超过1000个字符', trigger: 'blur' }]
      }
    }
  },
  methods: {
    showDrawer(params) {
      this.drawerType = params.type
      if (this.drawerType === 'edit') {
        this.editForm.packetId = params.packet.packetId
        this.editForm.packetNm = params.packet.packetNm
        this.editForm.packetCode = params.packet.packetCode
        this.editForm.packetDesc = params.packet.packetDesc
      }
      this.drawerVisible = true
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          let params = {
            packetNm: this.editForm.packetNm,
            packetCode: this.editForm.packetCode,
            packetDesc: this.editForm.packetDesc
          }
          if (this.drawerType === 'edit') {
            params.packetId = this.editForm.packetId
          }
          this.$ajax({
            url: this.$ajax.setUrl('ast/astTagPacket'),
            method: this.drawerType === 'add' ? 'post' : 'put',
            data: this.$ajax.setData(params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.drawerVisible = false
              this.$emit('refresh')
              this.$message.success('操作成功')
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    beforeClose() {
      this.drawerVisible = false
    },
    clearDialog() {
      this.editForm = {
        packetId: '',
        packetNm: '',
        packetCode: '',
        packetDesc: ''
      }
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
    }
  }
}
</script>

<style lang="scss"></style>
